'use strict'
import React from 'react'
import style from '../css.css'
import List from './list'

const { list } = serverData
class Ranking extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nav: 0,
      state: [false, false]
    }
    this._clickNav = this._clickNav.bind(this)
    this._handleState = this._handleState.bind(this)
  }
  _clickNav(nav) {
    console.log(nav)
    this.setState({ nav })
  }
  _handleState() {
    let { nav, state } = this.state
    state[nav] = !state[nav]
    this.setState({ state })
  }
  _renderList() {
    let { nav, state } = this.state
    let arrary = list[nav]

    let navState = state[nav]
    let arr = arrary.map((item, index) => {
      if (index >= 5 && !navState) { return }
      return (
        <List item={item} index={index} key={index} nav={nav} />
      )
    })
    return arr
  }
  _moreBtn() {
    let { nav, state } = this.state
    let arrary = list[nav]
    let navState = state[nav]
    if (arrary.length > 5) {
      return (
        <div className={style.rankList} onClick={this._handleState}>
          <div className={style.list} onClick={this._handleItem}>
            <div className={style.listHead}>
              <span className={style.listNo3}>···</span>
            </div>
            <div className={style.itemHeader}>
              <img />
            </div>
            <span className={style.listName}></span>
            <span className={style.listNum}>{navState ? '收起查看' : '查看更多'}</span>
          </div>
        </div>
      )
    }
  }
  render() {
    return (
      <div className={style.rankWrap}>

        <div className={style.rankTitle}>
          <div className={this.state.nav==0 ? style._left:style.left} onClick={()=>{this._clickNav(0)}}> </div>
          <div className={this.state.nav==0 ? style._right:style.right} onClick={()=>{this._clickNav(1)}}> </div>
        </div>
        <div className={style.stateText}>{this.state.nav==0 ?"说明：根据玩家送出告白弹幕、情书、怦然心动的礼券进行排行":'说明：根据点赞分享以及送出免费道具“荧光棒”所贡献的魅力之王成就值排名(1分享=10荧光棒=10个赞=100点成就值)'}</div>
        <div className={style.rankList}>
          {this._renderList()}
        </div>
        {this._moreBtn()}
      </div>
    )
  }
}
export default Ranking
